<template>
   <div class="rank" ref="rank">
   	<scroll class="toplist" :data="topList" ref="toplist">
   		<ul>
   			<li @click="selectItem(item)" class="rankitem flex " v-for="item in topList">
   				<img v-lazy="item.picUrl" alt="" class="ico">
   				<div class="cell-main  songlist" >
   				<li v-for="(song,index) in item.songList">
   				<div class="overhide l hui name">{{index+1}}&nbsp;
   					{{song.songname}}-{{song.singername}}</div>
   				</li>
   				</div>
   			</li>
   		</ul>
   		<div class="loading-container" v-show="!topList.length">
   			<Loading></Loading>
   		</div>
   	</scroll>
<router-view></router-view>
   </div>
</template>

<script type="text/ecmascript-6">
import {getTopList} from 'api/rank';
import {ERR_OK} from 'api/config';
import scroll from 'base/scroll/scroll';
import Loading from 'base/loading/loading';
import {playlistMixin} from 'common/js/mixin';
import {mapMutations} from 'vuex'
export default{
  name:'',
  mixins:[playlistMixin],
  created(){
  	this._getToplist()
  },
  mounted() {
    this.handlePlaylist(this.playlist)
  },
    data(){ return{
    	topList:[],
    }},
  methods:{
  	handlePlaylist(playlist){
  		const bottom =playlist.length>0?'60px':'';
  		this.$refs.rank.style.bottom=bottom;
  		this.$refs.toplist.refresh()
  	},
  	_getToplist(){
  		getTopList().then((res)=>{
  			if(res.code===ERR_OK){
  			this.topList=res.data.topList
  			}
  		})
  	},
  	selectItem(item){
  		this.$router.push({
  			path:`/rank/${item.id}`
  		})
  		this.setToplist(item)
  	},
  	...mapMutations({
  		setToplist:'SET_TOPLIST'
  	})
  },
  components:{scroll,Loading}
}
</script>

<style rel="stylesheet" lang="less">
    .rank{
    	position: absolute;
    	width: 100%;
    	top: 88px;
    	bottom: 0;
    }
    .toplist{
    	height: 100%;
    	overflow: hidden;
    }
    .rankitem{
    	margin: 0 20px;
    	padding-top: 20px;
    	.ico{
    		width: 100px;
    		height: 100px;
    		flex:0 0 100px;
    	}
    	.songlist{
    		padding: 0.7rem;
    		height: 100px;
    	    background: #333;
    	    box-sizing: border-box;
    	}
    	.name{
    		line-height: 26px;
    	}
    }
    .loading-container{
    	position: absolute;
    	width: 100%;
    	top: 50%;
    	transform:translateY(-50%)
    }
</style>
